<template>
  <div class="pay">
    <div class="top_title">
      请确认订单信息
    </div>

    <div class="List">

      <div class="Item">
        <div class="title">
          课程：
        </div>
        <div class="content">
          {{ pay_data.Course }}
        </div>
      </div>
      <div class="Border"></div>

      <div class="Item">
        <div class="title">
          时间：
        </div>
        <div class="content">
          {{ pay_data.weekday }} {{ pay_data.weekday_time }}
        </div>
      </div>
      <div class="Border"></div>

      <div class="Item">
        <div class="title">
          地点：
        </div>
        <div class="content">
          {{ pay_data.Store }}
        </div>
      </div>
      <div class="Border"></div>

      <!--<div class="Item">-->
        <!--<div class="title">-->
          <!--人数：-->
        <!--</div>-->
        <!--<div class="content">-->
          <!--<div class="people people1" @click="PeopleSelect">1人<div></div></div>-->
          <!--<div class="people" @click="PeopleSelect">2人<div></div></div>-->
          <!--<div class="people" @click="PeopleSelect">3人<div></div></div>-->
        <!--</div>-->
      <!--</div>-->
      <div class="Border"></div>

      <div class="Item">
        <div class="title">
          总价：
        </div>
        <div class="content">
          0元
        </div>
      </div>
      <div class="Border"></div>

    </div>

    <!--<div class="List" style="margin-top: 20px">-->

      <!--<div class="Item">-->
        <!--<div class="title">-->
          <!--超星卡折后价格：-->
        <!--</div>-->
        <!--<div class="content">-->
          <!--<a><div class="can_open"><span class="can_open_text">尚未开通</span></div></a>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="Border"></div>-->

      <!--<div class="Item">-->
        <!--<div class="title">-->
          <!--代金券：-->
        <!--</div>-->
        <!--<div class="content">-->
          <!--<div class="can_open">{{ pay_data.Coupon_acount }}张可用</div>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="Border"></div>-->

      <!--<div class="Item">-->
        <!--<div class="title">-->
          <!--还需支付：-->
        <!--</div>-->
        <!--<div class="content">-->
          <!--<span class="can_open_text">45元</span>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="Border"></div>-->

    <!--</div>-->

    <div class="Becareful">
      温馨提示：活动期间不支持退款。
    </div>

    <div class="to_pay" @click="clickPay()">
      <div style="flex: 1 1 1px; height: 100%;">
        <div class="to_pay_text">提交订单，微信支付</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { requestSchedulesDetail, requestPay } from '../api/api'

  export default {
    data () {
      return {
        pay_data: {
          money: 45,
          course_name: '哈他瑜伽(Kevin)',
          address: '深圳市福田区香轩路8号深业培训学院1楼',
          Coupon_acount: 0
        }
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.lodaOrder()
      })
    },
    methods: {
      PeopleSelect (e) {
        const peopleArray = document.getElementsByClassName('people')
        for (let i in peopleArray) {
          if (i !== 'item' && i !== 'length' && i !== 'namedItem') {
            peopleArray[i].classList.remove('people1')
          }
        }
        e.target.classList.add('people1')
      },
      lodaOrder () {
        let e = this
        requestSchedulesDetail(window.localStorage.getItem('SchedulesId'), {}).then((res) => {
          if (res.data.data) {
            e.pay_data = res.data.data
            e.pay_data.Course = e.pay_data.Course.data.title
            e.pay_data.Store = e.pay_data.Store.data.name
            if (e.pay_data.weekday === 1) {
              e.pay_data.weekday = '周一'
            }
            if (e.pay_data.weekday === 2) {
              e.pay_data.weekday = '周二'
            }
            if (e.pay_data.weekday === 3) {
              e.pay_data.weekday = '周三'
            }
            if (e.pay_data.weekday === 4) {
              e.pay_data.weekday = '周四'
            }
            if (e.pay_data.weekday === 5) {
              e.pay_data.weekday = '周五'
            }
            if (e.pay_data.weekday === 6) {
              e.pay_data.weekday = '周六'
            }
            if (e.pay_data.weekday === 7) {
              e.pay_data.weekday = '周日'
            }
          }
        })
      },
//      点击提交订单
      clickPay () {
        let e = this
        requestPay({
          schedule_id: JSON.parse(window.localStorage.getItem('SchedulesId')),
          store_id: 1,
          need_amount: 0
        }).then((res) => {
          e.$router.push({ name: 'MyBooking' })
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  @subject:#e61b64;
  .pay {
    height: 100%;
    background: #333;
    padding-bottom: 0.5rem;
  }
  .top_title {
    color: #ddd;
    height: 0.44rem;
    font-weight: 900;
    font-size: 0.16rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #333;
  }
  .List {
    background: #262626;
  }
  .Item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 51px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .title {
    font-size: 0.15rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding-left: 0.07rem;
    color: #cbcbcb;
    padding-right: 0.1rem;
    min-height: 0.3rem;
    -ms-flex-align: center;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .content {
    padding-right: 0.07rem;
    color: #ddd;
    /*white-space: pre-wrap;*/
    overflow: hidden;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
    -ms-flex-align: center;
    font-size: 0.15rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
  }
  .Border {
    height: 1px;
    margin-left: 0.07rem;
    background-color: #333;
    margin-right: 0.07rem;
  }

  .Becareful {
    margin: 0.17rem 0.18rem 0.2rem;
    text-align: center;
    font-size: 0.11rem;
    color: #8c8c8c;
    line-height: 0.17rem;
    word-wrap: normal;
    word-break: normal;
  }

  .people1, .people {
    padding-left: 0.05rem;
    padding-right: 0.05rem;
  }
   .people1, .people {
    color: #c7c7c7;
    background-image: none;
    border: 1px solid #525252;
    background-color: #383838;
    height: 0.28rem;
    font-size: 0.15rem;
    white-space: nowrap;
    overflow: visible;
    min-width: 0.47rem;
    border-radius: 0.03rem;
    margin-top: 0.13rem;
    margin-bottom: 0.13rem;
    margin-left: 0.15rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
  }

  .people1 {
    color: pink;
    background-color: @subject;
    border-color: @subject;
  }

  .can_open_text {
    color: @subject;
  }
  .can_open:after {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 1px solid #595757;
    border-right: 1px solid #595757;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-right: 0;
    margin-left: auto;
    display: inline-block;
  }
  .can_open, .can_open:after {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  *, :after, :before {
    border-style: solid;
    border-width: 0;
  }
  .to_pay {
    height: 0.49rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    bottom: 0;
    z-index: 2;
  }
  .to_pay {
    position: fixed;
    left: 0;
  }
  .to_pay_text, .to_pay_text:active, .to_pay_text:visited {
    color: pink;
    background: linear-gradient(to bottom, #df1b6b 0%,#a61ba3 100%);
  }
   .to_pay_text {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    width: 100%;
    font-size: 0.17rem;
    box-sizing: border-box;
    font-weight: 500;
  }
</style>
